<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view class="page-bgf" v-show="!loadingone">
			<navbar :name="pageTitle"></navbar>
			<view class="task-title w654">
				{{particulars.articleTitle}}
			</view>
			<view class="time-name">
				<text class="name-text">{{particulars.source}}</text>
				<text class="name-text">{{rTime(particulars.updateTime)}}</text>
			</view>
			<!-- 分割线 -->
			<view class="segmentation">
				<view class="segmentation-img">
					<image src="http://static.bsyjk.cn/l/AC4D1216E5A2453E8461CFF046C61492.png"
						style="width: 173upx;height: 22upx;" mode=""></image>
				</view>
				<view class="segmentation-img">
					<image src="http://static.bsyjk.cn/l/E86AB9D55A064E3599CC168B836B80E6.png"
						style="width: 173upx;height: 22upx;" mode=""></image>
				</view>
			</view>
			<view class="article-box wieww670" style="font-size: 18px!important;">
				<u-parse :html="particulars.articleContent" :tag-style="tagStyle"></u-parse>
			</view>
			<!-- 收藏分享 -->
			<view class="collect-share-box wieww670" v-if="type !=1">
				<view class=""></view>
				<view class="collect-right-box">
					<!-- 取消收藏 亮 -->
					<view class="collect-box-img" v-if="particulars.collectFlag" @tap.stop="cancelCollect">
						<image src="http://static.bsyjk.cn/l/05337438945C403586B9C074A35E99DF.png"
							style="width: 38upx;height: 38upx;" mode=""></image>
					</view>
					<!-- 收藏 未亮 -->
					<view class="collect-box-img" @tap.stop="collectAdd" v-if="!particulars.collectFlag">
						<image src="http://static.bsyjk.cn/l/6825E7051E7A45CE807B699423079C3E.png"
							style="width: 38upx;height: 38upx;" mode=""></image>
					</view>
					<!-- 分享按钮 -->
					<button class="share-img-box" style="width: 38upx;height: 38upx;" open-type="share">
					</button>
				</view>
			</view>
			<!-- <view class="CollectionToShare w654">
				<view class="star-view">
				</view>
				<view class="share-view">
				</view>
			</view> -->
			<!-- 首页任务 -->
			<view
				v-if="taskStepId != ''&&upPage!='healthBeans'&&task!=1||taskStepId != ''&&upPage!='healthBeans'&&task==1&&typeId==2">
				<task :taskStepId="taskStepId" :taskAppendix="taskAppendix" :task="task" :bean="bean" :upPage="upPage"
					:code="code" :typeId="typeId"></task>
			</view>
			<!-- 我的任务 -->
			<view v-if="taskStepId != ''&&upPage=='healthBeans'&&task!=1">
				<healthBeansTask :taskStepId="taskStepId" :task="task" :bean="bean" :upPage="upPage" :code="code">
				</healthBeansTask>
			</view>
			<view class="wieww670" v-if="typeId != 2">
				<view style="text-align: center;">
					<text class="title-text">
						推荐阅读
					</text>
				</view>
				<block v-for="(item,idx) in recordsBk" :key="idx">
					<view class="weui-flex articleBody"
						@tap="navtop('/pages/subpackage/find/articleDetails/details?id='+item.articleId)">
						<view class="articleView">
							<view class="articleContent text-line">
								{{item.articleTitle}}
							</view>
							<view class="lockbody">
								<view class="lockView"></view>{{item.readNum}}
							</view>
						</view>
						<view class="articleImage">
							<u-lazy-load border-radius="10" height="160" img-mode="aspectFill" :image="item.coverUrl">
							</u-lazy-load>
						</view>
					</view>
					<u-line v-show="idx !=articleList.length-1" class="u-line"></u-line>
				</block>
			</view>
			<view style="height: 200upx;">

			</view>
		</view>
	</view>
</template>

<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"
import uParse from "@/uview-ui/components/u-parse/u-parse.vue"


	import healthBeansTask from "./healthBeansTask"
	// import task from "@/components/task/task"
	export default {
		components: {
			// task,
			healthBeansTask,
			uLoading,
			uParse,
			uLazyLoad,
			uLine,
		},
		data() {
			return {
				tagStyle: {
					html:'font-size:18px!important;',
					body:'font-size:18px!important;',
					div:'font-size:18px!important;',
					td: 'font-size:18px!important;',
					p: 'font-size:18px;!important;',
					span: 'font-size:18px!important;',
					'*':'font-size:18px!important;',
				},
				taskAppendix: '',
				id: '', //分享id
				shareTitle: '', //分享标题
				pageTitle: '百科', //标题
				typeId: '', //
				upPage: '', //上一个页面
				loadingone: false,
				bean: '', //豆
				task: '',
				taskStepId: '', //完成任务id
				recordsBk: [], //推荐数组
				times: '', //当前时间
				particulars: '', //返回数据
				code: 15,
			};
		},
		onLoad(e) {
			this.pageTitle = e.pageTitle ? e.pageTitle : '百科';
			// console.log(e,116)
			let t = this;
			if (e.givePoint) {
				this.bean = e.givePoint; //豆
			}
			this.upPage = e.page ? e.page : '' //上一个页面
			if (e.task) { //任务
				this.task = e.task;
			}
			if (e.stepId) { //任务id
				this.taskStepId = e.stepId;
				this.getUserStepInfo(this.taskStepId) //获取图片
			}
			this.typeId = e.typeId
			// yzmtime(t)
			this.id = e.id;
			this.getArticleDetails(e.id)
			var numa = Math.floor(Math.random() * 1 + 1)
			this.articleBk(0, numa, 2) //0推荐 1 页数 2 条数
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onUnload() {},
		methods: {
			getUserStepInfo(userStepId) {
				let _this = this;
				this.$api.get(global.apiUrls.getUserStepInfo, {
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId,
					userStepId: userStepId,
				}).then(res => {
					_this.taskAppendix = res.data.result.taskAppendix
				})
			},
			navtop(url) {
				uni.navigateTo({
					url: url
				})
			},
			rTime(date) {
				var json_date = new Date(date).toJSON();
				return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(
					/\.[\d]{3}Z/,
					'')
			},
			// 获取推荐分享
			articleBk(classifyId, pageCurrent, pageSize) {
				let _this = this;
				this.$cms.get(global.apiUrls.randomRecommend + '?classifyId=' + classifyId + '&pageCurrent=' +
					pageCurrent +
					'&pageSize=' + pageSize, {}).then(res => {
					// console.log(res)
					let recordsBk = res.data.result;
					_this.recordsBk = recordsBk //当前推荐百科
				})
			},
			//文章收藏
			collectAdd() {
				let _this = this;
				this.$cms.post(global.apiUrls.articleCollects, {
						topicId: this.particulars.articleId, //文章id
						topicType: 1, //收藏类型1：文章2：讲堂3：商品4：帖子
					})
					.then(res => {
						console.log(res.data, '收藏文章')
						if (res.data.code == 1000) {
							_this.loadingone = false;
							_this.particulars.collectFlag = 1;
							_this.$message.info('收藏成功')
						} else {
							_this.loadingone = false;
							_this.$message.info('收藏失败')
						}
					}).catch(err => {
						_this.loadingone = false;
						_this.$message.info('收藏失败')
						console.log(res)
					})
			},
			//取消收藏
			cancelCollect() {
				let _this = this;
				this.$cms.delete(global.apiUrls.articleCollects, {
						topicId: this.particulars.articleId, //文章id
						topicType: 1, //收藏类型1：文章2：讲堂3：商品4：帖子
					})
					.then(res => {
						console.log(res.data, '取消收藏文章')
						if (res.data.code == 1000) {
							_this.loadingone = false;
							_this.particulars.collectFlag = 0;
							_this.$message.info('取消成功')
						} else {
							_this.loadingone = false;
							_this.$message.info('取消失败')
						}
					}).catch(err => {
						_this.loadingone = false;
						_this.$message.info('取消失败')
						console.log(res)
					})
			},
			//获取文章详情
			getArticleDetails(id) {
				this.loadingone = true;
				let _this = this;
				this.$cms.get(global.apiUrls.articleDetails + id, {})
					.then(res => {
						// console.log(res.data, '文章详情')
						if (res.data.code == 1000) {
							let result = res.data.result
							_this.shareTitle = result.articleTitle; //分享标题
							_this.particulars = result;
							_this.loadingone = false;
							_this.times = this.rTime(result.updateTime); //传入时间
						} else {
							_this.loadingone = false;
							_this.$message.info('加载失败请稍后再试')
						}
					}).catch(err => {
						console.log(err)
					})
			},
			//发送给朋友
			onShareAppMessage(res) {
				// 此处的distSource为分享者的部分信息，需要传递给其他人
				// let distSource = uni.getStorageSync('distSource');
				return {
					title: this.shareTitle,
					type: 0,
					path: '/pages/tab/home?id=' + this.id + '&type=3',
					summary: "",
					// imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
				}
			},
		}
	}
</script>

<style lang="scss">
	.w654 {

		padding: 0upx 24upx;
		// margin: 0 auto;
	}

	.time-name {
		margin-top: 22upx;
		margin-left: 24upx;

		.name-text {
			font-size: 30upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #9B9B9B;
			line-height: 42upx;
			margin-right: 20upx;
		}
	}

	//分割线
	.segmentation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0upx 24upx;
	}

	.task-title {
		font-size: 54upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 75upx;
		margin-top: 30upx;
	}

	.user-message {
		margin-top: 17upx;
		display: flex;

		.user-image {
			width: 65upx;
			margin-right: 7upx;
		}

		.user-center {
			width: 310upx;
			font-weight: 400;
			color: #9B9B9B;
			font-size: 24upx;

			.title {
				font-size: 30upx;
				line-height: 42upx;
			}
		}

		.user-titme {
			font-size: 26upx;
			font-weight: 400;
			color: #999999;
		}
	}

	.CollectionToShare {
		height: 80upx;
		position: relative;

		.star-view {
			width: 37upx;
			height: 37upx;
			// background: #FEB72C;
			position: absolute;
			bottom: 0;
			right: 120upx;
		}

		.share-view {
			width: 37upx;
			height: 37upx;
			background: url(http://static.bsyjk.cn/shareicon/DD44D2642C814F41947BF60EFBC11F0F.png)no-repeat;
			background-size: 37upx 37upx;
			position: absolute;
			bottom: 0;
			right: 0;
		}
	}

	.halvingLine {
		width: 654upx;
		height: 1upx;
		border: 1upx solid #EEEEEE;
		margin-top: 60upx;
	}

	.ShareFood-xj {
		width: 123upx;
		height: 123upx;
		margin: 93upx auto 30upx;
		background: pink;
	}

	.ShareFood-text {
		text-align: center;
		color: #2EA7E0;
	}

	.accomplish {
		width: 655upx;
		height: 90upx;
		font-size: 34upx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 90upx;
		margin: 80upx auto 0;
		border-radius: 50upx;
		background: #E2E1E2;
	}

	.actaveBtn {
		background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
	}

	.accomplish-popup {
		display: inline-block;
		width: 345upx;
		height: 90upx;
		background: #3A3A3A;
		border-radius: 15upx;
		opacity: 0.9;
		position: fixed;
		top: 50vh;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		font-size: 28upx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 90upx;
		letter-spacing: 1px;
		text-align: center;

		.jkdimage {
			width: 44upx;
			height: 36upx;
		}
	}

	.schedule {
		width: 154upx;
		height: 173upx;
		background-color: pink;
		position: fixed;
		top: 40vh;
		right: 0;
		text-align: center;
		color: #F5A623;
		z-index: 3;

		.countdown {
			font-size: 18upx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 23upx;
		}
	}

	.wieww670 {
		width: 706upx;
		background: #FFFFFF;
		border-radius: 25upx;
		margin: 24upx auto 0;
	}

	.articleBody {
		padding: 30upx 26upx;
	}

	.articleContent {
		width: 440upx;
		height: 84upx;
		font-size: 30upx;
		font-weight: 500;
		color: #333333;
		line-height: 42upx;
	}

	.articleImage {
		width: 200upx;
		height: 160upx;
	}

	.lockbody {
		padding: 45upx 0 0;
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
		line-height: 37upx
	}

	.lockView {
		width: 50upx;
		height: 28upx;
		background: #C0C4CC;
		float: left;
		background: url(http://static.bsyjk.cn/seeIcon/37C6382B372045CCB803A7F2DE1D24EA.png)no-repeat;
		background-size: 44upx 28upx;
	}


	.article-box {
		min-height: 200upx;

		//文章内容
		.article-text-box {
			font-size: 36upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 64upx;
		}

		//图片
		.article-img-box {
			width: 654upx;
			height: 342upx;
			margin: 40upx 0upx;
		}

		.video-box {
			width: 654upx;
			height: 342upx;
		}
	}

	//收藏 分享
	.collect-share-box {
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;

		.collect-right-box {
			display: flex;

			.collect-box-img {
				width: 38upx;
				height: 38upx;
				margin-right: 48upx;
			}

			.share-img-box {
				width: 38upx;
				height: 38upx;
				border: none;
				background-color: transparent;
				outline: none;
				background-image: url(http://static.bsyjk.cn/shareicon/DD44D2642C814F41947BF60EFBC11F0F.png);
				background-repeat: no-repeat;
				background-size: 38upx 38upx;
			}

		}
	}

	.title-text {
		position: relative;
		font-size: 36upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 50upx;
	}

	.title-text::before {
		content: '';
		position: absolute;
		height: 24upx;
		width: 100%;
		background-color: #2EA7E0;
		bottom: -10upx;
		opacity: 0.16;
	}
</style>
